<template>
  <div>
    <van-nav-bar title="我的红包" @click-left="onClickLeft">
      <template #right>
        <van-icon name="ellipsis" color="#000" size="18" />
      </template>
      <template #left>
        <van-icon name="arrow-left" color="#000" size="18" />
      </template>
    </van-nav-bar>

    <div style="width: 100vw; text-align: center">
      <div
        style="
          justify-items: center;
          margin: 3vw 2vw 0 2vw;
          border-radius: 3vw;
          width: 95vw;
          height: 32vw;
          background-color: red;
          color: #fff;
        "
      >
        <div style="float: right; padding-right: 20px">使用规则</div>
        <div style="text-align: center">
          <p style="width: 100vw; height: 6vw"></p>
          <p style="">红包余额</p>
          <p><span>￥</span><span style="font-size: 10vw">999999999.00</span></p>
        </div>
      </div>
    </div>
    <van-tabs @click="onClick" title-active-color="red">
      <van-tab title="可用红包" style="text-align: center">
        <img
          style="
            margin-top: 30vw;
            margin-left: 3vw;
            width: 30vw;
            height: 30vw;
            border-radius: 50%;
          "
          src="https://img2.baidu.com/it/u=3015221025,2298682281&fm=253&fmt=auto&app=138&f=JPEG?w=574&h=500"
          alt=""
        />
        <p>暂时没有红包</p>
      </van-tab>
      <van-tab title="历史红包" style="text-align: center">
        <img
          style="
            margin-top: 30vw;
            margin-left: 2vw;
            width: 30vw;
            height: 30vw;
            border-radius: 50%;
          "
          src="https://img2.baidu.com/it/u=3015221025,2298682281&fm=253&fmt=auto&app=138&f=JPEG?w=574&h=500"
          alt=""
        />
        <p>没有红包</p></van-tab
      >
    </van-tabs>
  </div>
</template>
  
  <script>
export default {
  methods: {
    //返回上个页面
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {},
    onClick(name, title) {
      //   Toast(title);
    },
  },
};
</script>
  
  <style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
</style>